<template>
    <div class="wrap">
        <div class="common-banner"><img src="../../common/img/banner/industry-alliance.jpg"/></div>
        <section>
            <div class="alliance-box">
                <ul class="alliance-boxl">
                    <li>
                        <img src="../../common/img/alliance1.png">
                        <div>
                            <p class="p1">成员单位</p>
                            <p class="p2">共<span>367</span>家</p>
                        </div>
                    </li>
                    <li>
                        <img src="../../common/img/alliance2.png">
                        <div>
                            <p class="p1">联盟专家</p>
                            <p class="p2">共<span>203</span>家</p>
                        </div>
                    </li>
                </ul>
                <button class="alliance-btn">加盟</button>
                <div id="alliance-tip-tk" class="tip-tk">
                    <div class="tk-title">提示</div>
                    <p class="tk-text">是否要下载中投联申请表？</p>
                    <div class="tk-btn">
                        <a href="中投联申请表.docx" download="中投联申请表.docx">确定</a>
                        <a id="cancel-btn">取消</a>
                    </div>
                </div>
            </div>

            <div class="head-title"><i></i><span>联盟介绍</span><i></i></div>
            <div class="alliance-intro">
                <div class="alliance-intro-text">
                    中厚明德产业投资联合体简称“中投联”，是具有共同价值理念、以推动产业和城镇发展为使命的企业家联盟和企业联合体。通过聚焦特色产业和新兴产业、集聚发展要素、链接专业资源、整合传播渠道等方式，打造一个“产业＋资本＋平台＋商学”的创新生态系统。
                </div>
                <img src="../../common/img/alliance3.png">
            </div>
            <my-swiper :wrapClass="'alliance-info'">
                <li slot="mySlot" class="swiper-slide" v-for="item in infos">
                    <img :src="item.src">
                    <div class="text1">{{item.text}}</div>
                    <div class="text2">{{item.title}}</div>
                </li>
            </my-swiper>
        </section>
        <section class="bg-alliance">
            <div class="head-title"><i></i><span>联盟机构设置</span><i></i></div>
            <div class="alliance-install">
                <div class="text">中厚明德产业投资联合体简称“中投联”，是具有共同价值理念、以推动产业和城镇发展为使命的企业家联盟和企业联合体。
                通过聚焦特色产业和新兴产业、集聚发展要素、链接专业资源、整合传播渠道等方式，打造一个“产业＋资本＋平台＋商学”
                的创新生态系统。<br/>
                “中投联”管理机构设置包括：理事会、委员会和秘书处。实行理事会领导下的秘书长负责制。</div>
                <my-swiper :wrapClass="'alliance-install-ul'">
                    <li slot="mySlot" class="swiper-slide" v-for="item in installs">
                        <p>{{item.title}}</p>
                        <span>{{item.con}}</span>
                    </li>
                </my-swiper>
            </div>
        </section>
        <section>
            <div class="head-title"><i></i><span>中投联服务</span><i></i></div>
            <my-swiper :wrapClass="'alliance-service'">
                <li slot="mySlot" class="swiper-slide" v-for="item in services">
                    <div class="title">{{item.title}}</div>
                    <span>{{item.con}}</span>
                </li>
            </my-swiper>
        </section>
        <section>
            <div class="head-title"><i></i><span>产业联盟</span><i></i></div>
            <ul class="alliance-indus">
                <li v-for="item in indus" :class="item.class">{{item.title}}</li>
            </ul>
        </section>
        <!-- 联盟会员单位 -->
        <section>
            <div class="head-title"><i></i><span>联盟会员单位</span><i></i></div>
            <ul class="alliance-member" style="margin-bottom: 20px;">
                <li v-for="item in members"><img :src="item.src"></li>
            </ul>
        </section>
        <m-bottom></m-bottom>
    </div>

</template>
<script>
import MBottom from 'components/m-bottom/m-bottom'
import MySwiper from 'base/myswiper/myswiper';

export default{
    data(){
        return {
            infos:[
                {
                    src:require("../../common/img/alliance4.png"),
                    text:"中厚明德产业投资联合体（简称：中投联）",
                    title:"联盟的名称"
                },
                {
                    src:require("../../common/img/alliance5.png"),
                    text:"产业驱动、资本协同、融合共享、创新发展",
                    title:"联盟的宗旨和性质"
                },
                {
                    src:require("../../common/img/alliance6.png"),
                    text:"秉承共创、共享、共赢理念，致力于搭建一个聚合产业链资源、智慧、资本的跨界融合平台化生态圈",
                    title:"联盟的职能和愿景"
                }
            ],
            installs:[
                {
                    title:"理事会",
                    con:"理事会是联盟的日常决策机构，主要负责联盟战略规划、重大事项及人事任免等事务。理事会内设理事长一人，副理事长若干和常务理事若干。"
                },
                {
                    title:"委员会",
                    con:"委员会是联盟的咨询参议机构，由在政、学、研、商等方面做出卓越成就的专家组成，对联盟的发展献计献策，保证联盟发展方向的正确性。"
                },
                {
                    title:"秘书处",
                    con:"秘书处是联盟日常工作的执行和办事机构，负责组织、管理、协调联盟的各项具体工作。秘书处内设秘书长一人和副秘书长若干。"
                }
            ],
            services:[
                {
                    title:"思想汇",
                    con:"中投联定期举办思想汇，整合各领域顶级资源，汇集各行业精英人士，让会员在沟通交流中碰撞出思想火花，打开运营思路，赢得发展机遇。"
                },
                {
                    title:"孵化器",
                    con:"基于中投联多年产业研究与资本运营经验，帮助会员企业进行产业链上下游资源的整合与集成，实现项目植入与产业输出，完成企业的外联式布局。"
                },
                {
                    title:"星企秀",
                    con:"通过中投联丰富的行业渠道及媒体资源，对会员企业进行全方位宣传报道，提升企业形象，彰显品牌价值。"
                },
                {
                    title:"政企通",
                    con:"搭建起企业与政府沟通的桥梁，即时掌握政策变化，实现政企沟通零距离，有效提高政企协作效率、降低沟通成本。"
                },
                {
                    title:"路演社",
                    con:"利用中厚明德所拥有的资源，为会员项目进行线上线下的项目路演与推介，帮助会员提升项目影响力，实现精准对接。"
                },
                {
                    title:"智慧谷",
                    con:"凝聚国内外相关领域知名专家、优秀企业董事长及CEO、政府决策部门领导等智库资源，为企业完成转型升级提供智库支持。"
                }
            ],
            indus:[
                {title:"大健康产业",class:"bg-17c4b1"},
                {title:"信息技术产业",class:"bg-f9b016 line-h"},
                {title:"交通仓储运输产业",class:"bg-4391f4 line-h"},
                {title:"新能源产业",class:"bg-17c4b1"},
                {title:"建筑产业",class:"bg-f9b016"},
                {title:"文化体育娱乐项目产业",class:"bg-4391f4 line-h"},
                {title:"金融产业",class:"bg-17c4b1"},
                {title:"农林牧渔产业",class:"bg-f9b016 line-h"},
                {title:"高端智能装备",class:"bg-4391f4 line-h"},
                {title:"房地产",class:"bg-17c4b1"},
                {title:"节能环保产业",class:"bg-f9b016 line-h"},
                {title:"生物产业",class:"bg-4391f4"},
                {title:"新能源汽车产业",class:"bg-17c4b1 line-h"},
                {title:"科学研究和技术服务",class:"bg-f9b016 line-h"},
                {title:"高端制造产业",class:"bg-4391f4 line-h"},
                {title:"文化旅游产业",class:"bg-17c4b1 line-h"},
                {title:"动漫游戏产业",class:"bg-f9b016 line-h"},
                {title:"新材料产业",class:"bg-4391f4"}
            ],
            members:[
                {src:require("../../common/img/allianceMember/首都医疗logo.png")},
                {src:require("../../common/img/allianceMember/鑫控集团logo.png")},
                {src:require("../../common/img/allianceMember/和睦家医疗logo.png")},
                {src:require("../../common/img/allianceMember/慈铭医疗logo.png")},
                {src:require("../../common/img/allianceMember/启迪控股logo.png")},
                {src:require("../../common/img/allianceMember/广东鸿艺集团logo.png")},
                {src:require("../../common/img/allianceMember/民生医药logo.png")},
                {src:require("../../common/img/allianceMember/广东华美国际投资logo.png")},
                {src:require("../../common/img/allianceMember/凯文国际教育logo.png")},
                {src:require("../../common/img/allianceMember/河北旅投logo.png")},
                {src:require("../../common/img/allianceMember/爱康国宾logo.png")}
            ]
        }
    },
    components:{
        MBottom,
        MySwiper
    }
}
</script>
<style scoped>
.alliance-box{
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding:23px 12px 14px 12px;
    overflow: hidden;
}
.alliance-boxl{
    float: left;
}
.alliance-boxl li {
    margin-right:20px;
    float: left;
}
.alliance-boxl li img{
    width: 44px;
    height: 36px;
    margin-right: 4px;
    float: left;
}
.alliance-boxl li div{
    float: left;
    text-align: center;
}
.alliance-boxl li div .p1{
    margin-bottom:6px;
}
.alliance-boxl li div .p2{
}
.alliance-boxl li div .p2 span{
    color:#f6020a;
    font-size: 16px;
}
.alliance-btn,
.tk-btn a{
    text-align: center;
    color: #fff;
    background-color:#3d7fd5;
    border:1px solid #3d7fd5;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    cursor: pointer;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}
.alliance-btn{
    float: right;
    width:70px;
    height: 32px;
    line-height: 30px;
    margin:2px 0;
}
.alliance-intro{overflow: hidden;}
.alliance-intro-text,
.alliance-install .text{
    width:100%;
    line-height: 26px;
    text-indent: 33px;
    padding:2px 12px 5px 15px ;
    box-sizing: border-box;
    overflow: hidden;
}
.alliance-intro img{
    width:234px;
    height: 234px;
    display: block;
    margin:40px auto;
}
.alliance-info li img{
    margin:22px auto 28px auto;
    width: 60px;
    height: 60px;
    display: block;
}
.alliance-info li .text1{
    height: 100px;
    width: 90%;
    padding:0 5%;
    text-align: center;
    line-height: 26px;
}
.alliance-info li:nth-child(3) .text1{
    text-align: left;
    font-size: 13px;
    line-height: 20px;
}
.alliance-info li .text2{
    width: 100%;
    height:32px;
    line-height: 32px;
    background-color:#3d7fd5;
    text-align: center;
    color: #fff;
    font-size: 16px;
}
.alliance-install{}
.alliance-install .text{
    margin-bottom: 30px;
}
.alliance-install-ul li{
    height: 230px;
    padding:0px 15px 15px;
    box-sizing: border-box;
    line-height: 22px;
    background:#7bb2f7;
    color: #fff;
    opacity: 0.9;
}
.alliance-install-ul li:nth-child(2){
    background:#e5e5e5;
    color: #000;
}
.alliance-install .ul li:nth-child(3){margin-right: 0;}
.alliance-install-ul li p{
    text-align: center;
    font-size: 16px;
    margin:12px 0;
}
.alliance-service{
}
.alliance-service li{
    width: 198px;
    height: 200px;
    border:1px solid #cbcbcb;
    float: left;
    margin-right: 20px;
}
.alliance-service li:last-child{
    margin-right: 0;
}
.alliance-service li .title{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background:#3c7fd5;
    color: #fff;
    text-align: center;
    font-size:16px;
}
.alliance-service li span{
    box-sizing: border-box;
    display: inline-block;
    padding:18px 10px 10px 12px;
    width: 100%;
    line-height: 22px;
    color: #666666;
}
.alliance-service li:hover .title{
    background:#3d7fd5;
    color: #fff;
}
.alliance-service li:hover span{color: #3d7fd5;}
.alliance-indus{
    overflow: hidden;
}
.alliance-indus li{
    width: 25.3%;
    box-sizing: border-box;
    margin:12px 4%;
    height: 50px;
    line-height: 34px;
    text-align: center;
    float: left;
    color: #fff;
    letter-spacing: 1px;
    font-size: 12px;
    opacity: 0.9;
    padding:8px 10px;
}
.alliance-indus li.line-h{line-height: 18px;}
</style>
